<template>
  <ContentContainer :loading="loading" :pagination="pagination" @run="run">
    <template #header-prefix>
      <a-alert class="!text-sm/22px">
        ACME 账户用于申请免费证书，建议创建多个。</a-alert
      >
    </template>
    <template #header>
      <a-button type="primary" @click="open">
        <i-icons-btn-add />
        创建账户
      </a-button>
    </template>
    <a-table v-bind="commonTableProps" :columns="columns" :data="data">
      <template #brand="{ record }">
        <span>{{ getOptionsLabel(LicenseBrandOptions, record.brand) }}</span>
      </template>
      <template #algorithm="{ record }">
        <span>{{
          getOptionsLabel(LicenseAlgorithmOptions, record.algorithm)
        }}</span>
      </template>
      <template #action="{ record }">
        <a-link status="danger" :hoverable="false" @click="handDelete(record)">
          删除
        </a-link>
      </template>
    </a-table>
    <CreateAccount v-model:visible="visible" @reload="run"> </CreateAccount>
  </ContentContainer>
</template>
<script lang="ts" setup>
import {
  deleteApiAcmeAccountApi,
  getApiAcmeAccountQueryApi
} from '@/apis/modules/license'
import { commonTableProps } from '@/utils/table'

import CreateAccount from './components/CreateAccount.vue'
const { visible, open } = usePopup()

const columns = buildColumns([
  {
    title: '邮箱',
    dataIndex: 'email'
  },
  {
    title: '证书品牌',
    width: 200,
    dataIndex: 'brand',
    slotName: 'brand'
  },
  {
    title: '密钥算法',
    width: 200,
    dataIndex: 'algorithm',
    slotName: 'algorithm'
  },
  {
    title: 'URL',
    dataIndex: 'url'
  },
  {
    title: '操作',
    width: 64,
    slotName: 'action'
  }
])

const { data, loading, run, pagination } = useListRequest(
  getApiAcmeAccountQueryApi,
  {
    immediate: true
  }
)
const handDelete = (row: any) => {
  const fn = () =>
    deleteApiAcmeAccountApi({ id: row?.id }).then(() => {
      ToastUtils.success('操作成功')
      run()
    })
  CloudModal.error(
    {
      content: `确认删除账户 “${row?.email}” ？`,
      okText: '删除'
    },
    fn
  )
}
</script>
